<template>
    <div ref="talkBox" class="arrow_box_left">
        <slot>我是对话框</slot>
    </div>
</template>
<script lang="ts">
import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
import { ColorType } from '@/enums/index';

@Component
export default class TalkBox extends Vue {
    @Prop({
        default: 0,
        type: Number,
    })
    private width!: number;

    @Prop({
        default: 0,
        type: Number,
    })
    private height!: number;

    @Prop({
        default: '',
        type: String,
    })
    private type!: string;

    @Prop({
        default: '',
        type: String,
    })
    private color!: string;

    private mounted() {
        const talkDom = this.$refs.talkBox as HTMLElement;
        if (talkDom) {
            if (this.width > 0) {
                talkDom.style.width = this.width + 'px';
            }
            if (this.height > 0) {
                talkDom.style.height = this.height + 'px';
            }
            this.$nextTick(() => {
                switch (this.color) {
                    case ColorType.default:
                        console.log(this.color, this.type);

                        talkDom.classList.add('default_color');
                        switch (this.type) {
                            case 'left':
                                talkDom.classList.add('default_color_left');

                                break;
                            case 'right':
                                talkDom.classList.add('default_color_right');

                                break;
                            case 'top':
                                talkDom.classList.add('default_color_top');

                                break;
                            case 'bottom':
                                talkDom.classList.add('default_color_bottom');

                                break;

                            default:
                                break;
                        }
                        break;
                    case ColorType.primary:
                        console.log(this.color, this.type);

                        talkDom.classList.add('primary_color');
                        break;
                    case ColorType.info:
                        console.log(this.color, this.type);
                        switch (this.type) {
                            case 'left':
                                talkDom.classList.add('info_color_left');

                                break;
                            case 'right':
                                talkDom.classList.add('info_color_right');

                                break;
                            case 'top':
                                talkDom.classList.add('info_color_top');

                                break;
                            case 'bottom':
                                talkDom.classList.add('info_color_bottom');

                                break;

                            default:
                                break;
                        }

                        talkDom.classList.add('info_color');
                        break;
                    case ColorType.danger:
                        console.log(this.color, this.type);

                        talkDom.classList.add('danger_color');
                        switch (this.type) {
                            case 'left':
                                talkDom.classList.add('danger_color_left');

                                break;
                            case 'right':
                                talkDom.classList.add('danger_color_right');

                                break;
                            case 'top':
                                talkDom.classList.add('danger_color_top');

                                break;
                            case 'bottom':
                                talkDom.classList.add('danger_color_bottom');

                                break;

                            default:
                                break;
                        }
                        break;

                    default:
                        break;
                }
            });

            switch (this.type) {
                case 'right':
                    talkDom.classList.remove('arrow_box_left');
                    talkDom.classList.add('arrow_box_right');
                    break;

                case 'top':
                    talkDom.classList.remove('arrow_box_left');
                    talkDom.classList.add('arrow_box_top');
                    break;

                case 'bottom':
                    talkDom.classList.remove('arrow_box_left');
                    talkDom.classList.add('arrow_box_bottom');
                    break;

                default:
                    break;
            }
        }
    }
}
</script>
<style lang="less" scoped>
.arrow_box_left {
    width: 200px;
    height: 120px;
    position: relative;
    background: #6dc7d5;
    border: 4px solid #c2e1f5;
}
.arrow_box_left:after,
.arrow_box_left:before {
    right: 100%;
    top: 50%;
    border: solid transparent;
    content: ' ';
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.arrow_box_left:after {
    border-color: rgba(109, 199, 213, 0);
    border-right-color: #6dc7d5;
    border-width: 30px;
    margin-top: -30px;
}
.arrow_box_left:before {
    border-color: rgba(194, 225, 245, 0);
    border-right-color: #c2e1f5;
    border-width: 36px;
    margin-top: -36px;
}

.arrow_box_right {
    width: 200px;
    height: 120px;
    position: relative;
    background: #95b3d5;
    border: 4px solid #c2e1f5;
}
.arrow_box_right:after,
.arrow_box_right:before {
    left: 100%;
    top: 50%;
    border: solid transparent;
    content: ' ';
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.arrow_box_right:after {
    border-color: rgba(149, 179, 213, 0);
    border-left-color: #95b3d5;
    border-width: 30px;
    margin-top: -30px;
}
.arrow_box_right:before {
    border-color: rgba(194, 225, 245, 0);
    border-left-color: #c2e1f5;
    border-width: 36px;
    margin-top: -36px;
}

.arrow_box_top {
    width: 200px;
    height: 120px;
    position: relative;
    background: #9382d5;
    border: 4px solid #c2e1f5;
}
.arrow_box_top:after,
.arrow_box_top:before {
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: ' ';
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.arrow_box_top:after {
    border-color: rgba(147, 130, 213, 0);
    border-bottom-color: #9382d5;
    border-width: 30px;
    margin-left: -30px;
}
.arrow_box_top:before {
    border-color: rgba(194, 225, 245, 0);
    border-bottom-color: #c2e1f5;
    border-width: 36px;
    margin-left: -36px;
}
.arrow_box_bottom {
    width: 200px;
    height: 120px;
    position: relative;
    background: #d57e98;
    border: 4px solid #c2e1f5;
}
.arrow_box_bottom:after,
.arrow_box_bottom:before {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: ' ';
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.arrow_box_bottom:after {
    border-color: rgba(213, 126, 152, 0);
    border-top-color: #d57e98;
    border-width: 30px;
    margin-left: -30px;
}
.arrow_box_bottom:before {
    border-color: rgba(194, 225, 245, 0);
    border-top-color: #c2e1f5;
    border-width: 36px;
    margin-left: -36px;
}
.default_color {
    background: #6dc7d5;
}
.default_color_left:after {
    border-right-color: #6dc7d5;
}
.default_color_right:after {
    border-left-color: #6dc7d5;
}
.default_color_top:after {
    border-bottom-color: #6dc7d5;
}
.default_color_bottom:after {
    border-top-color: #6dc7d5;
}
.primary_color {
    background: #95b3d5;
}
.primary_color_left:after {
    border-right-color: #95b3d5;
}
.primary_color_right:after {
    border-left-color: #95b3d5;
}
.primary_color_top:after {
    border-bottom-color: #95b3d5;
}
.primary_color_bottom:after {
    border-top-color: #95b3d5;
}

.info_color {
    background: #9382d5;
}

.info_color_left:after {
    border-right-color: #9382d5;
}
.info_color_right:after {
    border-left-color: #9382d5;
}
.info_color_top:after {
    border-bottom-color: #9382d5;
}
.info_color_bottom:after {
    border-top-color: #9382d5;
}

.danger_color {
    background: #d57e98;
}

.danger_color_left:after {
    border-right-color: #d57e98;
}
.danger_color_right:after {
    border-left-color: #d57e98;
}
.danger_color_top:after {
    border-bottom-color: #d57e98;
}
.danger_color_bottom:after {
    border-top-color: #d57e98;
}
</style>